{# SETTINGS #}
{% set element = element|default('article') %}
{% set headline__element = headline__element|default('h2') %}
{% if url is not empty %}
  {% set attributes = attributes.setAttribute('href', url) %}
  {% set element = 'a' %}
{% endif %}

{# CARD CLASSES #}
{% set link_classes = ([
  alignment == 'center' ? 'mx-auto': '',
  'text-indigo-500', 'inline-flex', 'md:mb-2', 'lg:mb-0', 'items-center', 'underline',
]) | sort | join(' ') | trim %}

{% set classes = ([
  alignment == 'center' ? 'text-center rounded': '',
  bg_color == 'gray' ? 'bg-gray-200',
  bg_color == 'blue' ? 'bg-blue-200',
  'w-full flex  max-w-xl flex-1',
  'border-2 border-gray-200 rounded-lg overflow-hidden w-full',
  variant == 'horizontal' ? 'flex-col md:flex-row' : 'flex-col'
] | sort | join(' ') | trim ) %}

{% set image_classes = ([
  variant == 'default' ? 'flex-0',
  variant == 'horizontal' ? 'h-48 lg:h-auto w-full lg:w-48 relative'
  ] | sort | join(' ') | trim ) %}

{% set attributes = attributes|default(create_attribute()).addClass(classes) %}

{# TEMPLATE #}
<{{ element }} {{ attributes }}>
  {% if image is not empty %}
    <div class="{{ image_classes }}">
      {% block image %}
        {{ image }}
      {% endblock %}
    </div>
  {% endif %}
  <div class="p-6 flex-1">
    {% include "@molecules/rich-snippet/rich-snippet.twig" with {
      preheadline: preheadline,
      headline: headline,
      headline_tag: headline_tag,
      text: text
    } only %}
    <div class="mt-8">
      {{ button }}
    </div>
  </div>
</{{ element }}>
